import React, { useState } from 'react'
import './css/register.css'
import axios from "axios";
import { NavBar, Input, Toast } from 'antd-mobile'
import { UserOutline, BankcardOutline, SmileOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
export default function Register() {
    const [username, setusername] = useState("")
    const [phone, setphone] = useState("")
    const [email, setemail] = useState("")
    const navigate = useNavigate()
    const phones = () => {
        navigate('/phone')
    }

    const register_login = () => {
        navigate('/login')
    }



    const register = async () => {
        let { data } = await axios.post("http://127.0.0.1:3000/register", {
            username,
            phone,
            email
        })
        if (data.code == 200) {
            Toast.show({
                content: '注册成功'
            })
            navigate("/login")

        }
    }

    return (
        <div id='li_register'>
            {/* 导航栏 */}
            <div id="register_header">
                <div id='register_headers' onClick={phones}>
                    <NavBar>注册页面</NavBar>
                </div>
            </div>

            {/* logo */}
            <div id='register_content'>
                <div id='register_content1'>
                    <div id='register_content_inco'>
                        <div id='register_content_p'>票</div>
                    </div>
                </div>
            </div>

            <div id='register_cj'>
                <h1 style={{ textAlign: 'center' }}>创建新账号</h1>
                <p style={{ textAlign: 'center', fontSize: "14px" }}>在此处创建您的账号</p>
            </div>

            {/* 创建页面 */}
            <div id='register_ym'>
                <div id="li_phone">

                    {/* 手机号 */}
                    <div id='li_yzm'>
                        <div id='yzm_inco'><BankcardOutline color='#ff976a' /></div>
                        <div id='yzm_input'>
                            <Input placeholder='请输入手机号码' value={phone} onChange={(e) => { setphone(e) }}></Input>
                        </div>
                        <div id='find_yzm'></div>
                    </div>
                    {/* 验证码 */}
                    <div id='li_yzm'>
                        <div id='yzm_inco'><SmileOutline color='#ff976a' /></div>
                        <div id='yzm_input'>
                            <Input placeholder='请输入用户名' value={username} onChange={(e) => { setusername(e) }}></Input>
                        </div>
                        <div id='find_yzm'></div>
                    </div>

                    {/* 邮箱 */}
                    <div id='li_yzm'>
                        <div id='yzm_inco'><UserOutline color='#ff976a' /> </div>
                        <div id='yzm_input'>
                            <Input placeholder='请输入邮箱' value={email} onChange={(e) => { setemail(e) }}></Input>
                        </div>
                        <div id='find_yzm'></div>
                    </div>
                </div>
            </div>

            <div id='register_div' onClick={register}>注册</div>

            <div id='register_div1'>已有账号?<span style={{ color: '#5088ce' }} onClick={register_login}>去登入</span></div>


        </div>
    )
}
